
import React from 'react';
import { View, Text, Image, StyleSheet, Dimensions, TouchableOpacity, BackHandler, Platform, TouchableNativeFeedback, ScrollView } from 'react-native';
import { Button, Flex, InputItem, Toast, Carousel } from 'antd-mobile-rn';
import constants from '../../utils/constants';
import api from '../../utils/api';
import JShareModule from 'jshare-react-native';
import loginService from '../../service/loginService';
import Utils from '../../utils';

// JShareModule.setDebug({ enable: true });

const window = Dimensions.get("window");

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        height: "100%"
    },
    logo: {
        alignItems: 'center',
        top: 50,
        height: 120

    },
    loginBtnView: {
        padding: 50,
        paddingBottom: 20
    },
    registerText: {
        fontSize: 14,
        color: "#ccc"
    },
    InputItemView: {
        padding: 20,
        paddingRight: 40,
        paddingBottom: 0,
        marginTop: 55,
    },
    loginTitle: {
        fontSize: 18,
        paddingLeft: 15

    }
});


export default class Login extends React.Component {

    static navigationOptions = (e) => {
        return {
            title: ""
        }
    }


    state = {
        phone: "",
        otherLoginView: "flex",
    }

    timer = null

    constructor(props) {
        super(props);
        this.navigation = this.props.navigation;
    }

    componentDidMount() {

        if (Platform.OS === 'ios') {
            JShareModule.setup();
        }




    }

    componentWillUnmount() {

    }


    /**
     * 第3方登录回调
     */
    _loginResult = (user) => {
        console.log("result:user::", user);
        const { navigation } = this.props;
        Utils.navigation(navigation, "/app/home", { user: user });
    }


    /**
     * 微信登录
     */
    handleWeixinLogin = () => {

        JShareModule.getSocialUserInfo({ platform: "wechat_session" }, (userInfo) => {
            console.log("weixin userinfo ::", userInfo);
            if (Platform.OS === 'android' && userInfo.code === 0) {
                //const originData = JSON.parse(userInfo.originData);
                //登录
                loginService.login({
                    loginType: 2,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.imageUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }
            if (Platform.OS === 'ios' && userInfo.openId) {
                loginService.login({
                    loginType: 2,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.iconUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }

            JShareModule.cancelAuthWithPlatform({ platform: "wechat_session" }, () => {

            })
        }, (e) => {
            console.log("weixin userinfo error ::", e);
        });

    }

    /**
     * QQ登录
     */
    handleQQLogin = () => {
        const { navigate } = this.props.navigation;
        JShareModule.getSocialUserInfo({ platform: "qq" }, (userInfo) => {
            console.log("qq userinfo ::", userInfo);
            if (Platform.OS === 'android' && userInfo.code === 0) {
                const originData = JSON.parse(userInfo.originData);
                //登录
                loginService.login({
                    loginType: 3,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.imageUrl,
                    address: `${originData.province},${originData.city}`
                }, this._loginResult);
            }

            if (Platform.OS === 'ios' && userInfo.openId) {
                loginService.login({
                    loginType: 3,
                    nickName: userInfo.name,
                    openId: userInfo.openId,
                    headImg: userInfo.iconUrl,
                    // address:`${originData.province},${originData.city}` 
                }, this._loginResult);
            }

            JShareModule.cancelAuthWithPlatform({ platform: "qq" }, () => { });
        }, () => {
            console.log("qq userinfo error ::");
        })


    }


    handleLogin = () => {
        console.log("click...")
        if (!this.state.phone) {
            Toast.info("手机号码不能为空", 1.2);

            return;
        }
        const { navigate } = this.navigation;
        const phone = this.state.phone.replace(/\s/g, "");
        loginService.sendCode({
            serviceType: "login",
            phone: phone
        }, () => {
            navigate("PhoneLogin", { phone: this.state.phone });
        })








    }

    render() {
        const { navigate } = this.navigation;
        return (
            <View style={styles.container} >
                <View style={{ alignItems: "center", marginBottom: 20 }}>
                    <Image source={require("./img/s.png")} style={{ width: 100, height: 45 }}></Image>
                </View>
                <View style={{ alignItems: "center", marginBottom: 50 }}>
                    <Text style={{
                        fontSize: 20,
                        color: "#697388"
                    }}>欢迎加入我们一起学习</Text>
                </View>
                <View style={{
                    height: window.height - 396,
                    justifyContent:"center",
                    alignContent:"center"
                }}>


                    <Carousel style={{ paddingBottom: 50, }}>
                        <View style={{ alignItems: "center" }}>
                            <Image source={require("./img/1.png")} style={{ width: 200, height: 200 }}></Image>
                        </View>
                        <View style={{ alignItems: "center" }}>
                            <Image source={require("./img/2.png")} style={{ width: 200, height: 200 }}></Image>
                        </View>
                        <View style={{ alignItems: "center" }}>
                            <Image source={require("./img/3.png")} style={{ width: 200, height: 200 }}></Image>
                        </View>

                    </Carousel>
                </View>
                <View style={{ padding: 10 }}>
                    <TouchableOpacity onPress={() => {
                        navigate("/app/login/phone", {});
                    }} style={{ backgroundColor: "#1e1f44", borderRadius: 6, alignItems: "center", height: 48, justifyContent: "center" }}>
                        <Text style={{ color: "#fff", fontSize: 16 }}>手机登录</Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
                    <View style={{ height: 1, width: "40%", backgroundColor: "#d8d8d8" }}></View>
                    <View style={{ width: "20%", alignItems: "center" }}>
                        <Text style={{ fontSize: 14, color: "#697388" }}>其他方式</Text>
                    </View>
                    <View style={{ height: 1, width: "40%", backgroundColor: "#d8d8d8" }}></View>
                </View>
                <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
                    <TouchableOpacity onPress={this.handleWeixinLogin.bind(this)} style={{ height: 44, width: (window.width - 30) / 2, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", borderColor: "#969eb0", borderWidth: 1, borderRadius: 6 }}>
                        <Text style={{ color: "#969eb0", fontSize: 16 }}>微信</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.handleQQLogin.bind(this)} style={{ height: 44, width: (window.width - 30) / 2, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", borderColor: "#969eb0", borderWidth: 1, borderRadius: 6, marginLeft: 10 }}>
                        <Text style={{ color: "#969eb0", fontSize: 16 }}>QQ</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}